import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'


import Center from '@/views/Center';
import Home from '@/views/Home'
import Discover from '@/views/Discover'
import AlreadyBuy from '@/views/AlreadyBuy'

import cookbookIcon from '@/assets/icon/cookbook.png'
import cookbookActiveIcon from '@/assets/icon/cookbook-active.png'
import categoryIcon from '@/assets/icon/category.png'
import categoryActiveIcon from '@/assets/icon/category-active.png'
import newsIcon from '@/assets/icon/news.png'
import newsActiveIcon from '@/assets/icon/news-active.png'
import centerIcon from '@/assets/icon/center.png'
import centerActiveIcon from '@/assets/icon/center-active.png'

class Main extends Component {
  state = {
    // 决定默认显示哪一个选项
    selectedTab: 'cookbook',
    // 决定了底部菜单是否显示或隐藏的开关 -- 后面要放到redux中，这样方便多层组件修改
    hidden: false,
  }

  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#2c2c2c"
          barTintColor="white"
          // 菜单的显示和隐藏
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookActiveIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'cookbook'}
            onPress={() => {
              this.setState({
                selectedTab: 'cookbook',
              });
            }}
          >
            <>
              {/* 写自己的显示的组件 */}
              <Home />
            </>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${categoryIcon}) center center /  21px 21px no-repeat`
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${categoryActiveIcon}) center center /  21px 21px no-repeat`
              }}
              />
            }
            title="已购"
            key="category"
            selected={this.state.selectedTab === 'category'}
            onPress={() => {
              this.setState({
                selectedTab: 'category',
              });
            }}
          >
            <AlreadyBuy />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${newsIcon}) center center /  21px 21px no-repeat`
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${newsActiveIcon}) center center /  21px 21px no-repeat`
              }}
              />
            }
            title="发现"
            key="news"
            selected={this.state.selectedTab === 'news'}
            onPress={() => {
              this.setState({
                selectedTab: 'news',
              });
            }}
          >
            <Discover />
          </TabBar.Item>

          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${centerIcon}) center center /  21px 21px no-repeat`
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${centerActiveIcon}) center center /  21px 21px no-repeat`
              }}
              />
            }
            title="个人中心"
            key="center"
            selected={this.state.selectedTab === 'center'}
            onPress={() => {
              this.setState({
                selectedTab: 'center',
              });
            }}
          >
            <Center />
          </TabBar.Item>

        </TabBar>
      </div>
    );
  }
}

export default Main;
